<template>
	<view>
		<swiper @click="previewImg" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
		  <swiper-item v-for="(item,i) in goodsList.pics" :key='i'>
          <image :src="item.pics_big" mode=""></image>
		  </swiper-item>
		</swiper>
	<view class="goods_desc" >
	  <view v-if="goodsList.goods_price"  class="" :style="{color:'#c00000'}">
	    ￥{{goodsList.goods_price}}
	  </view>
    <view class="dec_box" >
      <view class="goods_names" v-if="goodsList.goods_name">
        <!-- 左侧盒子 -->
        {{goodsList.goods_name}}
      </view>
      <view class="sc">
        <!-- 右侧盒子 -->
        <uni-icons type="star" size="15" :color="gray"></uni-icons>
        <text>收藏</text>
      </view>
    </view>
    <view class="" :style="{color:'gray',fontSize:12+'px',marginLeft:'10px',marginBottom:'20px'}">
      快递： 免运费
    </view>
	</view>
  <rich-text :nodes="goodsList.goods_introduce"></rich-text>
  <!-- 商品导航 -->
  <view class="goods_nav">
    <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
  </view>
  </view>
</template>

<script>
  import {mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {
        timmer:null,
        n:3,
				goodId:'',
        goodsList:[],
        total:'',
        options:[ {
            icon: 'shop',
            text: '店铺',
            infoBackgroundColor:'#007aff',
            infoColor:"red"
        }, {
            icon: 'cart',
            text: '购物车',
            info: 2
        }],
        buttonGroup: [{
          text: '加入购物车',
          backgroundColor: '#ff0000',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: '#ffa200',
          color: '#fff'
        }
        ]
			};
		},
    computed:{
      ...mapState('m_cart', ['cart']),
      ...mapState('m_user', ['token']),
    },
    onLoad(options){
      this.goodId=options.goodsId
      this.getGoodsList()
    this.addCarts()
    console.log('query',this)
    },
    methods:{
         // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
         ...mapMutations('m_cart', ['addToCart']),
         ...mapMutations('m_user',['updataType']),
     async getGoodsList(){
        const {data:res}=await uni.$http.get('/api/public/v1/goods/detail?goods_id='+this.goodId)
        if(res.meta.status!=200)return uni.$showMsg('加载数据失败！')
        uni.$showMsg('加载数据成功！')
        // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题 以及解决ios不兼容webp格式的问题
        res.message.goods_introduce=res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
        this.goodsList=res.message
      },
      previewImg(i){
        uni.previewImage({
          current:i,
          urls:this.goodsList.pics.map(x => x.pics_big)
        })
      },
      buttonClick(e){
       if(e.content.text=='加入购物车'){
         console.log('加入了')
          // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
         this.addToCart({
           goods_id:this.goodsList.goods_id,
           goods_name:this.goodsList.goods_name,
           goods_price:this.goodsList.goods_price,
           goods_count:1,
           goods_small_logo:this.goodsList.goods_small_logo,
           goods_state:true
         })
         this.addCarts()
       }else if(e.content.text=='立即购买'){
    
           if(!this.token) return this.to_login()
         uni.showToast({
           title:'有事加微信哈哈哈哈❤(3秒后自动关闭)',
           image:'/static/vx.jpg',
           duration:3000
         })
         
       }
      },
      to_login(){
            this.n=3
            let that=this
      this.timmer= setInterval(()=>{
          uni.showToast({
            // 不展示任何图标
            icon: 'none',
            // 提示的消息
            title: '请登录后再购买！' + that.n + ' 秒后自动跳转到登录页',
            // 为页面添加透明遮罩，防止点击穿透
            mask: true,
            // 1.5 秒后自动消失
            duration: 1500
          })
          if(that.n<=0){
            clearInterval(that.timmer)
            uni.switchTab({
              mask:true,
              url:'/pages/my/my',
              success:()=>{
                that.updataType({
                    openType:'navigateTo',
                    from:'/subpkg/goods_detail/goods_detail?goodsId='+that.goodId
                })
                console.log('that',that)
              }
            })
          }
         that.n--
          
        },1000)
          },
      onClick(i){
        if(i.content.text=='购物车'){
          uni.switchTab({
           url:'/pages/cart/cart'
          })
        }
      },
      addCarts(){
        this.options.find(function(x){
          if(x.text=='购物车'){
            // console.log('54555555',JSON.parse(uni.getStorageSync('cart')).length)
            let total=0;
         uni.getStorageSync('cart').forEach(i=>{
            total+= i.goods_count
            })
            x.info=total||''
          }
        })
      }
    }
	}
</script>

<style lang="scss">
swiper{
  margin-bottom: 20px;
  height: 750rpx;
  image{
    height: 100%;
    width: 100%;
  }
}
.dec_box{
  display: flex;
  padding: 10px 10px;
  .goods_names{
    font-size: 12px;
    border-right: 1px solid #f4f3f1;
    padding-right: 5px;
  }
  .sc{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300rpx;
    padding: 0 20px;
    padding-right: 10px;
    color: gray;
    text{
      font-size: 12px;
    }
  }
}
.goods_nav{
  width: 100%;
  position: sticky;
  bottom: 0;
}
</style>
